<clr-signpost>
  <clr-signpost-content *clrIfOpen>
    <h3 style="margin-top: 0">{{ action.name }}</h3>
    <p>
      {{ action.description }}
    </p>

    <p *ngIf="!action.isCapped(); else capped">
      <ng-container *ngIf="action.showTime">
        将在 {{ action.availableIn | endIn }} 后可用
      </ng-container>
    </p>
    <ng-template #capped>
      <p>
        达到上限
      </p>
    </ng-template>

    <div *ngFor="let cost of action.multiPrice.prices; trackBy: getPriceId">
      <h6>{{ cost.spendable.name }} {{ getVal(cost) }}%</h6>
      <span *ngIf="!cost.canBuy && action.showTime"
        >将在 {{ cost.avIn.times(1000).toNumber() | endIn }} 后可用</span
      >
      <div
        class="progress-static danger"
        [ngClass]="{ success: cost.canBuy, danger: !cost.canBuy }"
      >
        <div class="progress-meter" [attr.data-value]="getVal(cost)"></div>
      </div>
    </div>
  </clr-signpost-content>
</clr-signpost>
